<template>
  <div class="hry-content">
    <header :class="needBackground ? 'needBackground' : ''">
      <a-row>
        <a-col :span="6">
          <a-icon v-show="showBackBtn" type="left" @click="goBack()" />
        </a-col>
        <a-col :span="12" align="center">
          <span>{{ title }}</span>
        </a-col>
        <a-col :span="6" align="right">
          <slot name="action"></slot>
        </a-col>
      </a-row>
    </header>
    <div class="wrapper">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
import { Row, Col } from "ant-design-vue";
export default {
  name: "index",
  components: {
    aRow: Row,
    aCol: Col
  },
  props: {
    title: {
      type: String,
      default: "header"
    },
    showBackBtn: {
      type: Boolean,
      default: false
    },
    needBackground: {
      type: Boolean,
      default: true
    },
    backRouterName: {
      type: String,
      default: ""
    }
  },
  methods: {
    goBack() {
      if (window.history.length > 2) {
        this.$router.back(-1);
      } else {
        if (this.$route.matched.length === 3) {
          this.$router.push({ name: this.$route.matched[1].name });
        } else {
          this.$router.push({ name: "home" });
        }
      }
    }
  }
};
</script>

<style scoped lang="less">
.hry-content {
  height: 100%;
  width: 100%;
  .flex_content();
  .flex_column();
}
header {
  padding: 30px 39px;
  color: @white;
  font-size: 30px;
  font-weight: bold;
}
.needBackground {
  background: #ffffff;
  color: #444444;
}
.wrapper {
  flex: auto;
  overflow: hidden;
  height: 100%;
}
</style>
